<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="back" @click="search_back"><uni-icons type="back" color="#fff" size="20"></uni-icons></view>
		<!-- #endif -->
		<view class="box" @click="movieInfoBtn(movie)">
			<image class="box_bg" :src="movie.pic"></image>
			<image class="box_pic" :src="movie.pic"></image>
			<view class="box_text">
				<view class="box_text_name">{{ movie.name }}</view>
				<view class="box_text_score">
					评分:
					<text class="box_text_score_num">{{ movie.grade == 0 ? '暂无' : movie.grade }}</text>
				</view>
				<view class="box_text_type">{{ movie.filmTypes }}</view>
				<!-- <view class="box_text_date">{{ movie.publishDate }}</view> -->
				<view class="box_text_actor">{{ movie.cast }}</view>
			</view>
		</view>
		<!-- 影院 -->
		<view class="head">
			<view class="head_item" @click="select_city">{{ map.city || '城市' }}</view>
			<view class="head_item" @click="select_district">{{ map.district || '全城' }}</view>
		</view>
		<!-- 日期 -->
		<scroll-view class="date_tab" scroll-x="true">
			<view
				class="date_tab_item"
				:class="index == date_tab_index ? 'date_tab_active' : ''"
				@click="select_tab(index)"
				v-for="(item, index) in date_tab_list"
				:key="index"
			>
				{{ item | formatData }}
			</view>
		</scroll-view>
		<!-- 影院列表 -->
		<scroll-view class="scroll" scroll-y="true" @scrolltolower="scrolltolower" :scroll-top="scrollTop">
			<view class="scroll_item" v-for="(item, index) in cinema_list.list" :key="index" @click="cinema_btn(item)">
				<view class="scroll_item_info">
					<view class="scroll_item_info_name">{{ item.cinemaName || '影院名称' }}</view>
					<view class="scroll_item_info_money">
						<text class="scroll_item_info_money_text">市场价{{ item ? item.netPrice || 88 : '' }}</text>
						{{ item.vipPrice | surprised }} 惊喜价
					</view>
					<view class="scroll_item_info_address">{{ item.address || '地址' }}</view>
				</view>
				<view class="scroll_item_distance">{{ item.distance || '88m' }}</view>
			</view>
		</scroll-view>
		<!-- 结果为空 -->
		<view class="empty" v-if="cinema_list.list.length <= 0">
			<image src="../../static/empty.png" class="empty_img"></image>
			<view class="empty_text">抱歉啦,没有找到~</view>
		</view>
		<MyLoading :loading="loading" type="1" animation_updown="true"></MyLoading>
	</view>
</template>

<script>
import MyLoading from '@/components/my-loading/my-loading.vue';
import Route from '../../utils/route.js';
import Helper from '../../utils/helper.js';
export default {
	components: {
		MyLoading
	},
	data() {
		return {
			loading:true,
			scrollTop:800,
			// 电影详情
			movie: {},
			//地理位置
			map: {},
			//影院列表
			cinema_list: [],
			page: 1,
			//日期
			date_tab_list: {},
			date_tab_index: 0,
			// 提示
			is_alert_city: false //询问是否切换区县
		};
	},
	filters: {
		surprised(str){
		 str = str.toString()
		 return str.substring(0, 1) + '*' + str.substring(1 + 1);
		},
		formatData(data) {
			let date = new Date(data);
			let time = date.getTime() / 1000;
			let str;
			let today = new Date().setTime(Date.parse(Helper.date().replace(/-/g, '/')) / 1000 + 24 * 60 * 60 - 1);
			let tomorrow = new Date().setTime(Date.parse(Helper.date().replace(/-/g, '/')) / 1000 + 48 * 60 * 60 - 1);
			if (date.getDay() == 0) str = '周日 ' + Helper.date(date, 2);
			if (date.getDay() == 1) str = '周一 ' + Helper.date(date, 2);
			if (date.getDay() == 2) str = '周二 ' + Helper.date(date, 2);
			if (date.getDay() == 3) str = '周三 ' + Helper.date(date, 2);
			if (date.getDay() == 4) str = '周四 ' + Helper.date(date, 2);
			if (date.getDay() == 5) str = '周五 ' + Helper.date(date, 2);
			if (date.getDay() == 6) str = '周六 ' + Helper.date(date, 2);
			if (time <= today) str = '今天 ' + Helper.date(date, 2);
			if (today < time && time < tomorrow) str = '明天 ' + Helper.date(date, 2);
			return str;
		}
	},
	async onLoad(e) {
		this.loading = true;
		// 接参
		this.movie = JSON.parse(e.data);
		uni.setNavigationBarTitle({
			title: this.movie.name
		});
		// 获取地理位置
		this.map = uni.getStorageSync('map');
		//日期列表
		await this.getDateList();
		if(this.date_tab_list.length==0){
			this.loading = false;
			return uni.showToast({
				icon: 'none',
				title: '当前地区还未上映'
			});
		}
		// 影片详情
		this.cinema_list = await this.getCinemaList();
		// 打印
	},
	async onShow() {
		
		// 如果改变城市则刷新列表
		if (uni.getStorageSync('map').city_code != this.map.city_code) {
			this.$nextTick(function() {
			                this.scrollTop = 0
			            });
			this.map = uni.getStorageSync('map');
			this.loading = true;
			this.page = 1;
			this.cinema_list = await this.getCinemaList();
		}
		// 如果改变区县则刷新列表
		
		if (uni.getStorageSync('map').district_code != this.map.district_code) {
			this.map = uni.getStorageSync('map');
			this.loading = true;
			this.page = 1;
			this.cinema_list = await this.getCinemaList();
		}
	},
	methods: {
		// 切换日期
		async select_tab(index) {
			this.loading = true;
			this.page = 1;
			this.date_tab_index = index;
			let item = this.date_tab_list[index];

			this.cinema_list = await this.getCinemaList(this.page, item);

		},
		// 获取日期
		async getDateList() {
			this.date_tab_list = await Route.movie_date({
				cityId: this.map.city_code,
				filmId: this.movie.filmId
			});


		},
		// 获取影院列表
		async getCinemaList(page = 1, date = '') {
			let res = await Route.movie_cinema_list({
				page: this.page,
				latitude: this.map.latitude,
				longitude: this.map.longitude,
				cityId: this.map.city_code,
				area: this.map.district,
				filmId: this.movie.filmId,
				date: date || this.date_tab_list[this.date_tab_index]
			});
			if (res.list.length == 0 && !this.is_alert_city && this.map.district!='全城') {
				this.alert_city();
			}

			this.loading = false;
			return res;
		},
		// 询问
		alert_city() {
			this.is_alert_city = true;
			uni.showModal({
				title: '没有找到',
				content: '请您试试全城搜索吧~',
				success: async res => {
					if (res.confirm) {
						this.scrollTop = 0
						this.loading = true;
						
						this.map.district = '全城';
						this.map.district_code = '';
						this.page =1;
						this.cinema_list = await this.getCinemaList(this.page, this.date_tab_list[this.date_tab_index]);

					} else if (res.cancel) {
					}
				}
			});
		},
		// 触底
		async scrolltolower() {
			if (this.hasMore == 0) {
				return uni.showToast({
					icon: 'none',
					title: '没有更多啦'
				});
			}
			this.loading = true;
			this.page += 1;
			let res = await this.getCinemaList(this.page);
			if (res.hasMore == 0) {
				return uni.showToast({
					icon: 'none',
					title: '没有更多啦'
				});
			}
			this.cinema_list.list = this.cinema_list.list.concat(res.list);
			this.loading = false;
			this.hasMore = res.hasMore;
		},
		// 返回
		search_back() {
			uni.navigateBack();
		},
		// 选择城市
		select_city() {
			uni.navigateTo({
				url: '../address_city/address_city'
			});
		},
		// 选择地区
		select_district() {
			uni.navigateTo({
				url: '../address_district/address_district'
			});
		},
		// 购票
		cinema_btn(e) {
			let data = {
				filmId: this.movie.filmId,
				cinemaId: e.cinemaId,
				cinemaName: e.cinemaName,
				hallName: e.hallName,
				address: e.address,
				latitude: e.latitude,
				longitude: e.longitude,
				schedule_tab_index: this.date_tab_index,
				date: this.date_tab_list[this.date_tab_index]
			};

			uni.navigateTo({
				url: '../schedule/schedule?data=' + JSON.stringify(data)
			});
		},
		// 电影详情
		movieInfoBtn(e) {
			uni.navigateTo({
				url: '../movie_info/movie_info?filmId=' + e.filmId
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
.back {
	position: absolute;
	z-index: 2;
	left: 10rpx;
	top: 10rpx;
	padding: 10rpx 20rpx;
}
.box {
	height: 333rpx;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	&_bg {
		position: absolute;
		z-index: 0;
		height: 100%;
		width: 100%;
		-webkit-filter: blur(8px);
		-moz-filter: blur(8px);
		-o-filter: blur(8px);
		-ms-filter: blur(8px);
		filter: blur(8px);
	}
	&_pic {
		z-index: 1;
		width: 214rpx;
		height: 300rpx;
		//#ifdef H5
		margin-left: 66rpx;
		// #endif
		border-radius: 11rpx;
	}
	&_text {
		z-index: 1;
		width: 333rpx;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		font-size: $uni-font-size-base;
		color: $uni-text-color-inverse;
		&_name {
			font-size: $uni-font-size-lg;
			font-weight: 900;
			font-weight: 600;
		}
		&_actor {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
		&_score {
			&_num {
				font-size: $uni-font-size-lg;
				color: $template-background;
			}
		}
	}
}
// 头部
.head {
	top: 333rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100vw;
	height: 88rpx;
	background: #fff;
	z-index: 2;
	&_item {
		position: relative;
	}
	&_item::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: -22rpx;
		margin: auto;
		height: 10rpx;
		width: 10rpx;
		background: linear-gradient(135deg, #000 0%, #000 50%, transparent 50%, transparent 100%);
		transform: rotate(225deg);
	}
}
.date_tab {
	display: flex;
	white-space: nowrap;
	width: 750rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-bottom: 1rpx solid $template-line;
	border-top: 1rpx solid $template-line;
	&_item {
		display: inline-block;
		width: 333rpx;
		text-align: center;
	}
	&_active {
		color: $template-background;
		position: relative;
	}
	&_active:after {
		content: ' ';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 6rpx;
		width: 66%;
		height: 6rpx;
		margin: 0 auto;
		background: $template-background;
		border: 8rpx;
	}
}
// 列表
.scroll {
	width: 100vw;
	height: calc(100vh - 88rpx - 333rpx - 100rpx - 30rpx);
	display: flex;
	flex-direction: column;
	&_item {
		display: flex;
		flex-direction: row;
		padding: 33rpx 0;
		width: 690rpx;
		margin: 0 auto;
		border-bottom: 1rpx solid $template-line;
		&_info {
			display: flex;
			flex-direction: column;
			width: 550rpx;
			&_name {
				font-size: $uni-font-size-lg;
				font-weight: 600;
			}
			&_money {
				font-size: $uni-font-size-base;
				color: red;
				&_text {
					text-decoration: line-through;
					color: $uni-text-color-grey;
					margin-right: 8rpx;
				}
			}
			&_address {
				color: $uni-text-color-grey;
				font-size: $uni-font-size-base;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
		&_distance {
			color: $uni-text-color-grey;
			font-size: $uni-font-size-base;
		}
	}
}
// 空列表
.empty {
	position: fixed;
	top: 49vh;
	left: 0;
	z-index: 9;
	background: #fff;
	width: 100vw;
	// height: 40vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	&_img {
		width: 386rpx;
		height: 282rpx;
	}
	&_text {
		margin-top: 8rpx;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
	}
}
</style>
